@import "../../styles/variables";
@import "../../styles/mixins";

.notify-wrapper {
  .notify {
    position: fixed;
    background-color: transparent;
    padding: 0;
    border: none;
    top: 0;
    z-index: 2010;
    pointer-events: none;
    .notice {
      box-shadow: $notify-shadow;
      width: $notify-width;
      position: relative;
      border-radius: $border-radius;
      border: solid 1px $notify-default-color;
      background-color: $notify-default-color;
      margin: 10px 0 20px;
      color: $notify-default-text;
      pointer-events: auto;

      &-error {
        border-color: $notify-error-color;

        .notify-icon {
          background-color: $notify-error-color;
        }

        .notify-title {
          color: $notify-error-text;
        }

        .notice-close {
          .kubed-icon {
            color: $notify-error-text;
          }
        }
      }

      &-warning {
        border-color: $notify-warning-color;

        .notify-icon {
          background-color: $notify-warning-color;
        }

        .notify-title {
          color: $notify-warning-text;
        }

        .notice-close {
          .kubed-icon {
            color: $notify-warning-text;
          }
        }
      }

      &-success {
        border-color: $notify-success-color;

        .notify-icon {
          background-color: $notify-success-color;
        }

        .notify-title {
          color: $notify-success-text;
        }

        .notice-close {
          .kubed-icon {
            color: $notify-success-text;
          }
        }
      }

      &-info {
        border-color: $notify-info-color;

        .notify-icon {
          background-color: $notify-info-color;
        }

        .notify-title {
          color: $notify-info-text;
        }

        .notice-close {
          .kubed-icon {
            color: $notify-info-text;
          }
        }
      }
    }
  }

  .notify-with-icon {
    position: relative;
    .notify-icon {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 56px;
      text-align: center;
      .icon {
        height: 100% !important;
      }
    }
    .notify-text {
      height: 100%;
      margin-left: 56px;
      padding: 7px 16px;
    }

    .notify-title {
      font-weight: 500;
      line-height: 20px;
      padding-right: 40px;
    }

    .notify-content {
      font-family: $font-family-id;
      font-weight: $font-bold;
      line-height: 20px;
      color: $notify-default-text;
      @include break-all;
    }
  }

  .notice-close {
    position: absolute;
    top: 7px;
    right: 8px;
    height: 20px;
    width: 20px;
    cursor: pointer;
  }
}
